<template>
	<view>
		<view class="detail-info-card">
			<view class="detail-list">
				<view class="list">
					
					<view class="list-left">
						群名称
					</view>
					<view class="list-right">
						<input type="text" value="" placeholder="请输入" placeholder-class="grlob"/>
					</view>
				</view>
				<view class="list">
					<view class="list-left">
					群头像
					</view>
					<view class="list-right aic-cente">
						<view class="flex" style="flex-wrap:wrap;padding-top:20rpx;">
							<view v-for="(item, index) in headed_pics" :key="index" class="layui-imgbox">
								<view class="layui-imgbox-close" @tap="removeimg" :data-index="index" data-field="headed_pics"><image src="https://lt.caomei.zone/xcxstatic/static/img/ico-del.png"></image></view>
								<view class="layui-imgbox-img"><image :src="item" @tap="previewImage" :data-url="item" mode="widthFix"></image></view>
								<!-- <view class="layui-imgbox-repeat" @tap="xuanzhuan" :data-index="index" data-field="pics"><text class="fa fa-repeat"></text></view> -->
							</view>
							<view class="uploadbtn"  @tap="uploadimg" data-field="headed_pics" v-if="headed_pics.length==0">
								<text class="colorTheme" style="line-height: 200rpx;">点击上传</text>
							</view>
							
						</view>
						<!-- <uni-file-picker limit="1" :del-icon="false" 
						:imageStyles="imageStyles"
						disable-preview
						:listStyles="listStyles"
						file-mediatype="image">
						<text class="colorTheme">点击上传</text>
						<uni-icons type="right" color="#717171" size="20"></uni-icons>
						</uni-file-picker> -->
								
					</view>
				</view>
				<view class="list flex-wrap">
					<view class="list-left">
						群介绍
					</view>
					<view class="list-right">
						<input type="text" value="" placeholder="请输入" placeholder-class="grlob"/>
					</view>
				</view>
				
				
				<view class="list flex-wrap clrea-show">
					<view class="list-left">
						群图片
					</view>
					<view class="list-right">
						<view class="flex" style="flex-wrap:wrap;padding-top:20rpx;">
							<view v-for="(item, index) in pics" :key="index" class="layui-imgbox">
								<view class="layui-imgbox-close" @tap="removeimg" :data-index="index" data-field="pics"><image src="https://lt.caomei.zone/xcxstatic/static/img/ico-del.png"></image></view>
								<view class="layui-imgbox-img"><image :src="item" @tap="previewImage" :data-url="item" mode="widthFix"></image></view>
								<!-- <view class="layui-imgbox-repeat" @tap="xuanzhuan" :data-index="index" data-field="pics"><text class="fa fa-repeat"></text></view> -->
							</view>
							<view class="uploadbtn" :style="'background:url('+pre_url+'/static/img/shaitu_icon.png) no-repeat 60rpx;background-size:80rpx 80rpx;background-color:#F3F3F3;'" @tap="uploadimg" data-field="pics" v-if="pics.length<9">
								
							</view>
							
						</view>
						<!-- <view class="example-body">
							<uni-file-picker limit="3" @success="successFile" @progress="progress"></uni-file-picker>
						</view> -->
					</view>
				</view>
				<view class="list">
					<view class="list-left">
						群位置
					</view>
					<view class="list-right">
						<view class="uni-list-cell-db">
							<text  @click="local()" class="grlob" v-if="address==''">请选择</text>
							 <textarea
							 v-else
							     v-model="address"
							      auto-height
							      show-confirm-bar
								  @click="local()"
								  disabled 
								  placeholder-class="grlob"
							    ></textarea>
							<!-- <picker  mode = region @change="bindPickerChange" :value="index">
									<view class="aic-cente" v-if="regionList.length==0">
										<text>请选择</text>
										<uni-icons type="right" color="#717171" size="20"></uni-icons>
									</view>
									<view class="uni-input" v-else>{{ regionList[0]+','+regionList[1]+','+regionList[2]}}</view>
							</picker> -->
						</view>
					</view>
				</view>
				<view class="list clrea-show">
					<view class="list-left left-flex">
						<text style="font-size: 30rpx;font-weight: 600;">入群审核</text>
						<text>允许任何人加入</text>
						
					</view>
					<view class="list-right">
						<switch @change="isJoin=!isJoin" :checked="isJoin"  />
					</view>
				</view>
			</view>
			<view class="send-btn">
				提交
			</view>
		</view>
	</view>
</template>

<script>
	var app = getApp()
	export default {
		data() {
			return {
				index:0,
				regionList:[],
				isJoin:false,
				pics:[],
				headed_pics:[],
				pre_url:app.globalData.pre_url,
				address:"",
				imageStyles: {
					width: 100,
					height: 80,
					dispaly:"flex",
					border:false
				},
			};
		},
		methods:{
			 bindPickerChange: function(e) {
			            console.log('picker发送选择改变，携带值为', e.detail.value)
			            this.regionList = e.detail.value
			  },
			  uploadimg:function(e){
			  	var that = this;
			  	var field= e.currentTarget.dataset.field
			  	var pics = that[field]
			  	if(!pics) pics = [];
			  	app.chooseImage(function(urls){
			  		for(var i=0;i<urls.length;i++){
			  			pics.push(urls[i]);
			  		}
			  		if(field == 'pic') that.pic = pics;
			  		if(field == 'pics') that.pics = pics;
			  		if(field == 'zhengming') that.zhengming = pics;
			  	},9)
			  },
			   // 定位
			    local(){
			      wx.getLocation({
			        type:'gcj02',
			        isHighAccuracy:true,
			        altitude:true,
			        success:(res)=>{
			          wx.chooseLocation({
			            latitude:res.latitude,
			            longitude:res.longitude,
			            success:(res)=>{
							console.log(res)
			              this.address=res.address+res.name
			            }
			          })
			        }
			      })
			    },
			successFile(file){
				console.log(file)
			},
			progress(file){
				console.log(file)
			},
			removeimg:function(e){
				var that = this;
				var index= e.currentTarget.dataset.index
				var field= e.currentTarget.dataset.field
				var pics = that[field]
				pics.splice(index,1)
			},
		}
	}
</script>

<style lang="less">
.detail-info-card{
		width: 95%;
		min-height: 0;
		padding: 10rpx;
		background-color: #FFFFFF;
		margin: 2% auto;
		margin-bottom: 150rpx;
		border-radius: 25rpx;
		.detail-list{
			width: 100%;
			padding-left:18rpx;
			.list{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 25rpx 0;
				// box-shadow: 0  1rpx #e6e6e6;
				border-bottom: 1rpx solid #e6e6e6;
				.list-left{
					color: #5d5d5d;
					font-size: 0.9rem;
				}
				.list-right{
					// color: #cecece;
					// font-weight: 600;
					.grlob{
						color: #cecece;
					}
					input{
						text-align: right;
					}
					textarea{
						width: 300rpx;
					}
				}
				.list-right-type{
					width: 60%;
					display: flex;
					flex-wrap: wrap;
					// justify-content:space-around;
					.list-type{
						width: 45%;
						margin: 1% 2.5%;
						height: 60rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						background-color: #f9d7d9;
						font-weight: 600;
						border-radius: 30rpx;
					}
				}
			}
			.flex-wrap{
				display: flex;
				flex-wrap: wrap;
				.list-right{
					width: 100%;
					margin: 2% 0;
					input{
						width: 100%;
						text-align: left;
					}
				}
			}
			.clrea-show{
				box-shadow: 0 0 0 #000000;
				border-bottom: none;
			}
		}
	}
	.uploadbtn{
		display: flex;
		justify-content: center;
		align-items: centen;
	}
	.left-flex{
		display: flex;
		flex-direction: column;
		text{
			margin: 5% 0;
		}
	}
	.aic-cente{
		display: flex;
		align-items: center;
	}
 .send-btn{
	 position: fixed;
	 bottom: 3%;
	 width: 95%;
	 height: 80rpx;
	 color: #FFFFFF;
	 background-color: #994275;
	 border-radius: 80rpx;
	 display: flex;
	 justify-content: center;
	 align-items: center;
	 // font-size: 1rem;
	 left: 50%;
	 transform: translateX(-50%);
 }
 .layui-imgbox{margin-right:16rpx;margin-bottom:10rpx;font-size:24rpx;position: relative;}
 .layui-imgbox-close{position: absolute;display: block;width:32rpx;height:32rpx;right:-16rpx;top:-16rpx;z-index:90;color:#999;font-size:32rpx;background:#fff}
 .layui-imgbox-close image{width:100%;height:100%}
 .layui-imgbox-img{display: block;width:200rpx;height:200rpx;padding:2px;border: #d3d3d3 1px solid;background-color: #f6f6f6;overflow:hidden}
 .layui-imgbox-img>image{max-width:100%;}
 .layui-imgbox-repeat{position: absolute;display: block;width:32rpx;height:32rpx;line-height:28rpx;right: 2px;bottom:2px;color:#999;font-size:30rpx;background:#fff}
 .uploadbtn{position:relative;height:200rpx;width:200rpx}
 .uploadbtn_ziti1{height:30rpx; line-height: 30rpx;font-size:30rpx; margin-top: 20rpx;}
 .uploadbtn_ziti2{height:30rpx; line-height: 30rpx;font-size:30rpx; padding-top: 20rpx; margin-top: 20rpx;border-top:1px solid #EEEEEE;}
</style>
